<mat-dialog-content class="mat-typography">
  <h3>Properties</h3>

  @if (healthDetails) {
    <table mat-table [dataSource]="healthDetails.details | keyvalue" class="mat-elevation-z8" aria-describedby="Health modal table">
      <ng-container matColumnDef="key">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">{{ element.key }}</td>
      </ng-container>

      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef>Value</th>
        <td mat-cell *matCellDef="let element">{{ readableValue(element.value) }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  }
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>
